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ABSTRACT 

This thesis is part of an effort by the Department of 
Electrical and Computer (ECE) Engineering to implement 
distributed learning to better serve its students. 
Distributed learning is especially useful for a modern 
technologically-oriented military, which is geographically 
distributed. The goal of this thesis is to develop a 
prototype web-based course, specifically, EC2820 - Digital 
Logic Design. A primary sub-goal is to quantify time 
required and to understand the tradeoffs involved. A 
secondary sub-goal is to evaluate web page tools. 
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I. 



INTRODUCTION 



A. AREA OF RESEARCH 

The World Wide Web is causing a major change education. 
There has been a rapid increase in the number of people 
using the Web, and this has created significant potential 
for university teaching. There is now the prospect of 
"distributed learning" with students at perhaps many 
different remote sites. It has created a new paradigm for 
teaching and learning different from the traditional 
classroom experience. 

The Department of Electrical and Computer Engineering 
(ECE) at the Naval Postgraduate School (NPS) has initiated a 
Distributed Learning program intended to achieve two goals: 

• extend the benefits of a militarily-relevant 
electrical and computer engineering education to 
more people . 

• enhance existing on-site courses by introducing 
multimedia into the learning process. 

The ECE department oversees the Navy's graduate program 
of education in signals, circuits, networking, 
communications, power systems and computing. Rapid changes 
in technology have made education for electrical and 
computer engineers even more important than in the past. At 
the same_ time, job demands have made it difficult for people 
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to devote the time needed to improve their effectiveness. 
Distributed learning is seen as a cost/ time-effective 
solution to this problem. 

The first goal of extending education to more people 
includes both new students in the form of short courses, as 
well as a full Master of Science or Doctor of Philosophy 
program, and former students in the form of continuing 
education. The second goal relates to improving the way 
students learn. The multimedia capabilities of the Web allow 
the use of color, graphics, animation and interaction, in 
ways that have not been possible in the past. 

The goal of this thesis is to develop a prototype web- 
based course, specifically, EC2820 - Digital Logic Design, 
which shall include self-paced lectures, quizzes, laboratory 
write-ups, grading criteria, special notes, and so forth. A 
primary sub-goal is to quantify time required to develop a 
web-based course and to understand the tradeoffs involved. A 
secondary sub-goal is to evaluate web development tools . 



B . RESEARCH QUESTIONS 

• Which recent Web technology is the most suitable 
(e.g. cost/ time-effective) for the production of Web- 
Based Training (WBT) ECE courses? 

• What is the recommended approach, design and 
development process that should be adopted for 
future productions? 
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what training is required of individuals who do such 
production? 






C. RESULTS OF THE RESEARCH 

This research has established a step-by-step design and 
development process for WBT course production, which have 
been adopted to successfully complete the EC2820 - Digital 
Logic Design On-Line Course, and the EC2820 Homepage from 
which the on-line course is launched. This research has also 
determined the Web technology suitable for future WBT course 
production efforts by the ECE department. 

Chapter II discusses the benefits of Distributed 
Learning. It also covers the approach and the resources 
required to undertake a WBT course production. In addition, 
it addresses the principal considerations that need to be 
examined when selecting a course for WBT. 

Chapter III, Recent Technologies For WBT Course 
Production, presents the research findings on several Web 
technologies , currently used to produce WBT courses . The 
pros and cons of each type were examined and compared. 

Chapter IV explains the step-by-step design and 
development process of producing the EC2820 Homepage and the 
EC2820 - Digital Logic Design On-Line Course. It also covers 
the use of a popular software development approach known as 
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"incremental development" that was specifically used to 
design and develop the on-line course. 

Chapter V contains the conclusions and recommendations. 



II . DISTRIBUTED LEARNING 



A. WHAT IS DISTRIBUTED LEARNING? 

Distributed learning allows students from anywhere in 
the world to study at home or work. The means of delivery of 
the educational materials include satellite broadcast, 
broadband broadcast, home video, two-way compressed video, 
audio conferencing, text-based correspondence courses, 
television broadcast, and the Web. 

New and exciting distributed learning methodology with 
extensive use of multimedia, using the Web to provide Web- 
based Training (WBT) courses, is rapidly being developed, 
making the Web currently the most cost/ time-effective 
option. Also, the Web is easily accessible by users using 
computers connected to the internet from a location of their 
choice, and more importantly at their own pace and in their 
own time. Appendix A discusses important principles in the 
use of multimedia for distributed learning. 

B. WHY DISTRIBUTED LEARNING? 

Many organizations have gone into distributed learning 
for the following reasons: 

• To extend education to more people. 

• To augment present traditional education. 
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• To provide education, tailored to specific needs. 

• To improve costs and efficiencies by distributing 
instructional components inexpensively to physically 
remote locations . 

C. RESOURCES & TIME REQUIRED FOR WBT COURSE 
PRODUCTION 

In order to produce an effective WBT course, a design 
and development team consisting of the following members has 
to be formed: 

1 . Content Es^ert 

The content expert is usually, the instructor or the 
producer of the course materials used for the traditional 
teaching method. He/she is usually the team leader and is 
the one to decide what materials to include in the WBT 
course . 

2 . Web Designer 

The Web designer is responsible to transform the course 
materials from their raw form (hand-written or type-written) 
into a digital form suitable for interactive presentations 
using multimedia software tools. He/she will determine how 
interactivity can be used to encourage active involvement 
from the users, and how animations can be used to illustrate 
difficult concepts and complex processes. 
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3. Education Specialist 

The education specialist is responsible for the 
organization and presentation of the WBT course materials to 
ensure that they become the effective learning tools. 

4. Graphic Designer / Artist 

The graphic designer is responsible to transform 
figures, tables, and photos in their raw form (hand-drawn, 
computer-drawn or any analog type) into computer graphics 
suitably compressed to reduce their size to allow fast 
downloading time of the WBT course into the user's 
computers. He/she will also be responsible for implementing 
any animations required. 

5 . Prograinmer 

In WBT course production, where there is programming 
involved, a prograinmer is reqpaired. He/she is responsible to 
code, test, interface and integrate all the WBT components. 

6. Server Administrator 

The server administrator is responsible for providing a 
website for publishing the WBT course, and protecting its 
contents from unauthorized access and modification. 
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III. RECENT TECHNOLOGIES FOR WBT COURSE PRODUCTION 



In evaluating a suitable technology for WBT course 
production, the following characteristics were preferred: 

• Uses Commercial-Off-the-shelf (COTS) software. 

• Has short development time 

• Encourages interactivity. 

• Has good maintenance/upgrade support 

• Is cost effective. 



Several recent technologies used to develop WBT courses 
were studied. They include the following: 

• Lecture materials published on web pages . 

• Slide shows, similar to those produced by Microsoft 
PowerPoint, that run on the web browser. 

• An interactive course developed using a high level 
language such as Java or Visual Basic. 

• An interactive course developed using a proprietary 
software package. 

• An interactive course developed using commercial- 
off-the-shelf (COTS) authoring tools such as the 
Macromedia Director 7 , Macromedia Authorware 5 and 
Asymetrix Toolbook. 



A. LECTURE MATERIALS PUBLISHED ON WEB PAGES 

Publishing lecture materials directly on web pages is 
the simplest, the easiest and the fastest to produce WBT 
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courses. Essentially, the lecture materials are digitized 
with text type-written, tables created using a word- 
processing application, and figures scanned or drawn with a 
graphics -editing program. 

A sample is shown Figure 1 below. 




S] . ... - r~r Intern^ ^ 

Figure 1 . Example Of Lecture Materials Published On 

A Web Page 

The main disadvantage of this form of WBT course is 
that it lacks the two elements, animation and interactivity, 
that are vital for effective learning. It does not have the 
animation feature that is useful for illustration of 
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difficult concepts or complex processes. Without 
interactivity, we cannot get the users to actively 
participate in the course, and also to give feedback. 



B . SLIDE SHOWS 

Slide shows are simple and easy to produce. The same 
Microsoft PowerPoint slides that an instructor uses for 
his/her traditional classroom lectures can be easily 
imported into a website for use as a WBT course. Minimal 
development effort is required in this case. 

A sample of a WBT course that is of the slide show form 
is shown in Figure 2 below. Similar to the lecture materials 
published on Web pages described earlier, the slide shows 
lack animation and interactivity. 
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Circuit Construction • Microsoft Internet Explorer 
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We can again construct the equatwn foi^ 

F = A.B.C + A^jO -h A.B.C -h AB.C7 
= B.C + B.C 
= B^C 

This gives a circuit diagram of 




Exercise : Inputs -d, B and C represent the first, second and third bit of a three digit binary number N. N'is represented by the 
function F such that 

MN > on 

otherwise 
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Figure 2 . Slide Show 

C. WBT COURSE DEVELOPED USING A HIGH LEVEL LANGUAGE 

In the past, high level languages such as Java, Visual 
Basic, C++, etc. were used by many to develop Computer-based 
Training (CBT) courses. Today, a small number of developers 
are still using these high level languages to produce WBT 
courses . 

The main advantage of using high level languages is 
that they are highly flexible and they allow full 
customization to meet practically all the requirements of an 
effective WBT course. 
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However, the main disadvantage is its high development 
cost in terms of time and money. Many subroutines, 
functions, libraries, etc. must be created from scratch to 
support specific requirements, such as user interface, 
screen navigations, search feature, animation and 
interactivity . 

The other disadvantage is its poor maintainability. The 
program codes are inherently long, and, more often than not, 
developers fail to document them adequately. Hence, 
modifications and upgrades become both time-consxaming and 
tedious . 

Nowadays, application-specific software tools have been 
made available to help developers produce WBT courses . They 
are simple to learn and easy to use. They are discussed in 
the next two sections . 



D. WBT COURSE DEVELOPED USING A PROPRIETARY SOFTWARE 
PACKAGE 

Proprietary software tools tailored for WBT course 
production are becoming increasingly popular with 
organizations transiting into distributed learning. The main 
attraction to these tools is the short learning curve. 



However , 


many of 


these tools 


are 


created by 


small 


software companies 


that lack 


the 


experience 


and 


compr ehens i ve 


customer 


support of 


the 


more established 
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companies. As compared to COTS authoring tools to be 
discussed in the next section, these proprietary tools are 
usually more expensive (US$5,000 to US$30,000). Often, they 
do not have as many features and flexibility. 

A sample WBT course developed using a proprietary 
software tool is shown Figure 3 below. 
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Chapter 1 Slides - Power Point (379904 bytes) 



Instruction Execution 

Processor executes instructions in a 
program 

Instructions are fetched from memory one 
at a time 



Fetch Cycle Execute Cycle 




Figure 



3. WBT Course Developed Using A Proprietary Software 
Tools (http: / /blackboard. com/courses/CIT185LW/ ) 



E. WBT COURSE DEVELOPED USING COMMERCIAL-OFF-THE- 
SHELF (COTS) INTERACTIVE SOFTWARE TOOLS 

There are several COTS interactive software tools for 

WBT course development available in the market today. Some 
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have been used since the development of CBT courses started, 
and have since improved, upgraded and packed with more 
advanced features to produce powerful CBT and WBT courses. 

The main advantages of using these COTS tools include 
shorter learning curve, ease of use, excellent 
maintainability and upgradeability . 



F. RECOMMENDED TECHNOLOGY FOR USE 

Summarized in Table 1 below are all the technologies 
discussed above that are available for WBT course production 
compared against the preferred characteristics mentioned 
earlier in the chapter. 
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COTS 

software? 


Development 

time? 


Interactive? 


Good maint/ 
upgrade 
support? 


Cost 

effective? 


Lecture 
materials 
published as 
web pages 


Yes 


Short 


No 


Yes 


Yes 


Slide shows 


Yes 


Short 


No 


Yes 


Yes 


High level 
language 


Yes 


Long 


Yes 


Not so 
good 


Yes 


Proprietary 

software 

package 


No 


Short 


Yes 


Not so 
good 


No 


COTS authoring 
tools 


Yes 


Moderate 


Yes 


Yes 


Yes 



Table 1. Comparison Of Technologies Available 



From Table 1, it can be seen that using COTS authoring 
tools was the most appropriate option for developing the 
EC2820 - Digital Logic Design On-Line Course. 

6. SELECTION OF SOFTWARE TOOLS FOR THE EC2820 ON-LINE 
COURSE 

In selecting the appropriate COTS software tools to 
use, previous research work done under the thesis project 
"Interactive Multimedia for Classroom and Web Use" by Darren 
Harvey were taken into considerations. [Ref. 15] 

The main software tool selected by the author for 
creating the interactive on-line course was the Macromedia 
Authorware 5, with the support of a few other software tools 
to perform the other functions of a WBT course development 
as well -as the website creation discussed below. These other 
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tools included graphic editors, text editor, website 
creation and management tools . 

1. Interactive WBT Course Development Tool 

Through further research and experimentation, the 
selection for the main software tool for creating the 
interactive EC2820 On-Line course was narrowed to the three 
software tools namely Authorware 5, Director 7, and Flash 3, 
all of which were from Macromedia. 

A summary of the comparison of the three tools is 
given in Table 2 below. [Ref. 12] 
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Authorware 5 


Director 7 


Flash 3 




(US$2400) 


(US$1000) 


(US$350) 


Overview 


Authorware is 


Director is the 
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standard for 




leading tool for 


creating and 


creating vector- 




creating 


delivering 


based animations 




interactive. 


powerful 


and graphics 




rich-media 


multimedia for 


that are 




learning 


the Web, CD-ROMs 


extremely 




applications for 


and DVD-ROMs . 


beautiful. 




delivery over 




compact and 




the Web, LANs, 




resizable for 




CD-ROMs and DVD- 




the Web, CD-ROMs 




ROMs . 




and DVD-ROMs . 


Main use 


• Computer- 


• Web-based 


• High impact 




based 


multimedia 


branded sites 




training 
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• Web site 




• Web-based 
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training 
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Primary Users 


• Training 
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• Web designers 
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developers 


• Animators 
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• Multimedia 






designers 
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• Sub j ect 
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matter 


presentation 
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User 


Icons on a 


Frame-based 


Timeline-based, 


flowline. 


using a score. 


graphical 


Interface 




powerful 

scripting 

language. 


editing tools. 



Table 2 . Comparison Of Tools Available For WBT Course 

Development Tool 

There were also other similar tools available from 
other software companies such as Toolbook from Asymetrix 
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which was the equivalent of Authorware 5 , and Premiere from 
Adobe which was the equivalent of Director 7 and Flash 3 . 

As shown in Table 2 above, Authoorware 5 was optimized 
for interactive WBT course development and hence it was 
selected as the main software tool for developing the EC2820 
On-Line course. Although Darren Harvey used both Authoirware 
5 (for main instructional content) and Director 7 (for 
animation and interaction) in his WBT course development, 
the author experimented extensively with Authorware 5 and 
realized that Authorware could perform the animation and 
interaction functions of Director 7. In fact, the 
interaction features of Authorware were superior than that 
of Director. [Ref. 15] 

Authorware was the leading visual rich-media authoring 
tool for creating Web and on-line learning applications. The 
1999 Computer-Based Training Report by SB Communications, 
publisher of CBT Solutions Magazine report, ranked 
Authorware as the Number One in the market every year since 
1995. 
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When most of us hear the term 'digital*, we immediately think of 'digitel 
calculator* or ‘digital computer*. It is important to realize that calculators 
and^omputers representonlyone-ofthe many applicationsof digital s 
circuits and principles. 



□Digital circuits are used in electronic products such as high fidelity sound | 
systems^ watches, video games, automobHe control systems, TVs and 
radios. 



In this course, we are going to study the principles and techniques 
common to all digital systems^ 
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Figure 4. Authojrware Developer's Interface 



The other key advantages of Authorware are discussed 



below: 



• Short Learning Curve. Developers of any skill level 
can quickly develop media-rich interactive learning 
applications with the Authorware flowline, icons, 
and templates . It took the author only three weeks 
to master the basic features of Autho 2 rware. A sample 
flowline is shown in Figure 5 below. 
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Figure 5 . 



[^9.1 Ripple Carry Adder (Parallel Adder) 




Autho3nA7are ' s Easy To Use Flowline 



& Icons 



• Highly Interactive. Authorware maximizes learning 
with highly-interactive features including 
hyperlinking, hypertext, full text search and 
retrieval, and eleven different built-in 
interactions. It makes it easy to handle a wide 
variety of media and precisely track and respond to 
users' actions. 




Figure 6. Authorware 's Eleven Built-In Interactions 

• Ease of Maintenance and Upgrade. Authorware 
represents program flow in graphical form, and it 
requires little programming for added flexibility. 
Hence, its program is simple to read and analyze, 
making it easy to maintain and upgrade . 

• Distribution Flexibility. With Authorware, one can 
create learning applications, and deliver them to 
users on the Web, LANs, or in an executable format 
on CD-ROMs or DVD-ROMs . 
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• Fast Web Download. Authorware uses advanced 
compression and streaming techniques for fast 
downloading of its applications on the Web. 



2 . Graphics Editors 

As authorware' s built-in graphics editing function had 
limited capability, external graphics editors were used to 
performing the intricate functions of scaling, rotation, 
flipping, zooming, cropping, cutting, pasting and other 
manipulations of graphics. There were many good graphics 
editors in the market such as Coreldraw, Photoshop, 
Freehand . 

Due to unavailability of any of these graphics editors, 
and also the lack of time to master them, the Microsoft 
PowerPoint was used to create all the graphics required for 
the on-line course, and then they imported into Paint Shop 
Pro, a shareware graphics editor from http: //www. jasc. com , 
to compress them into GIF format before inserting them into 
Authorware. In fact, any available graphics editor would be 
able to perform the GIF compression function. 

Microsoft PowerPoint was used due to its simplicity and 
user-friendliness. The other reason was the availability of 
the "multiple undo" feature provided by PowerPoint that was 
not found in many graphics editors . This feature helped 
tremendously . 
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Text Editor 



3. 

The majority of the text used in the on-line course was 
typed using Microsoft Word instead of the AuthorT^rare built- 
in text editor. The reasons were that the built-in text 
editor lacked the excellent text formatting, styling, 
coloring, spelling check and auto-correct features of 
Microsoft Word. 

4. Website Creation And Management Tools 

The website creation and management tools provided the 
many functions needed to plan, create, test, maintain and 
manage the EC2820 Homepage. Besides presenting the EC2820 
course information such as the course objectives, outline, 
textbook, laboratory information etc., the homepage also 
served as the platform from which the EC2820 On-Line Course 
was launched on the Web and accessed by users . 

The Macromedia Dreamweaver (US$300) and Microsoft 
Frontpage 2000 (US$70) were the two website creation and 
management tools evaluated as they were the two most 
popularly used recently. 

Dreamweaver had more advanced features than the 
Frontpage 2000. However, in terms of ease of use and user- 
friendliness, Frontpage 2000, with its look and feel 
designed very much like the rest of the Microsoft Office 
2000 packages, was significantly better. 
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C:\My DocximentsSMy WebsWi>web3\indexLhtm 
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Figure 7. Frontpage 2000 

The major weakness of Frontpage 2000 was its lack of 
compatibility with most web servers. The interactive 
features offered by Frontpage 2000 such as forms, search, 
confirmation field etc., could not work on most popular web 
servers, including the NPS server that was hosting the 
EC2820 Homepage. In order to make these features work, these 
servers, hosting web sites created using Frontpage, must 
install the Frontpage Seorver Extensions, a proprietary 
software of Microsoft to support Frontpage interactive 
components on the web. 
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Dreamweaver, on the other hand, was compatible with 
most web servers, and it used cgi scripts to handle the 
interactive features available, instead of a server 
extension. 

As the EC2820 Homepage did not require any interactive 
features, and also to cut down on development time. 
Frontpage 2000 was used to create the EC2820 Homepage. 
Nevertheless, the homepage could be modified using 
Dreamweaver to incorporate interactive features 
subsequently, if needed. 
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IV. THE DESIGN AND DEVELOPMENT PROCESS 



The process adopted for the design and development of 
the EC2820 On-Line course was similar to that used for 
conventional software development, with the exception of a 
training phase included at the beginning as shown in Figure 

8 . 




Figure 8 . The Design And Development Process 



A. TRAINING PHASE 

The training phase was required to allow the author to 
self-acquire the knowledge and skills of various multimedia 
tools necessary to produce significant web applications for 
on-line courses. Four Web development and multimedia tools 
namely Director 7, Authorware 5 Attain, Frontpage 2000 and 
Dreamweaver 2 were covered over a period of eleven weeks 
(with normal school lessons ongoing at the same time) , as 
shown in the schedule below. A discussion of the software 
has been given in Chapter III. 
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Topic 



Week 

1 



Week 

2 



Week 

3 



Week 

4 



Week 

5 



Week 

6 



Week 

7 



Week 

8 



Week 

9 



Week 

10 



Week 

11 



Learning Director 7 



Learning Authorware 5 



Learning Frontpage 2000 



Learning Dreamweaver 2 



Table 3 . Training Schedule 



B. ANMiYSIS 

In this phase, the objectives and requirements of 
creating the EC2820 On-Line Course were understood and 
translated into an implementation plan. Essentially, two 
end-products were required; the EC2820 Homepage and the 
EC2820 On-Line Course. An evaluation of the above mentioned 
Web development and multimedia software tools were done, and 
it was decided that the Microsoft Frontpage 2000 and the 
Macromedia Authorware 5 should be used to develop the 
homepage and the on-line course, respectively, based on 
their suitability, ease of use and maintainability as 
discussed in Chapter III. 

With these requirements in mind and having experimented 
with the software tools, tasks needed to complete the 
project were determined. The time and effort req[uired of 
each task were assessed, and time was allocated to each task 
to ensure that they were achievable in the time available as 
shown in the Table 4 below. 
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S/N 


TASK 


Jul 

1999 


Aug 

1999 


Sep 

1999 


Oct 

1999 


Nov 

1999 


Dec 

1999 


Jan 

2000 


Feb 

2000 


Mar 

2000 


1. 


Gathering of 
Information for 
EC2820 Homepage 




















2. 


Design of the EC2820 
Homepage 




















3. 


Obtain Website for 
the EC2820 Homepage 


◄- 


► 
















4. 


Development of the 
EC2820 Homepage 




















^ W 


5. 


Gathering and 
Understanding of 
material for the 
EC2820 On-Line Course 




















“ W 


6. 


Design of the EC2820 
On-Line Course 






















W 


7. 


Development of the 
EC2820 On-Line Course 








^ - 
























8. 


Testing 


































w 


9. 


Thesis Report 
























w 


r 


rable 4. 1 


■’asks Schedule 



C . DESIGN 

1. EC2820 Homepage Design 

With the knowledge of Frontpage 2000 and also some 
guidelines on the "do's and don'ts" of website design 
[Ref. 13 & 14], the layout of the EC2820 Homepage was first 
designed. 

The following design considerations were used: 



• It must be easy to navigate. Therefore, intuitive 
navigation menus were prominently displayed at the 
top and left hand side of each page. 

• Each page must allow access to all of the other Web 
pages throughout the website. The same set of 
navigation menus were placed at the same location' on 
each page for easy access by users . 

• The design throughout the Web site needs to be 
consistent. Therefore, the layout of every page was 
made the same with buttons, background picture, 
banners, colors standardized. 
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seen 



• Links to other relevant sites must be provided. 

Links to further information on the textbook, the 
creator of the homepage, the professor- in-charge, 
NPS, disclaimer, and link to Autho:rware plug-in were 
incorporated in the appropriate pages . 

• The pages need to be pleasing to the eye. Several 

layouts, fonts style, color combinations and 

background picture were experimented to give a 
pleasant look and feel . 



The final design used for the EC2820 Homepage can be 
in Figure 9 . 
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EC2820 : DIGITAL LOGIC 
CIRCUITS 
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Figure 9. Final Layout Design Used For The EC2820 Homepage 
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2. EC2820 On-Line Course Design 

Unlike the design of the homepage, the design of the 
EC2820 On-Line Course required more thought and 
experimentation due to the much larger amount of information 
that must be handled, more complex navigation, a smaller 
screen area (640 x 480 resolution to cater to all user 
screen size), and multiple user accessible functions. 

There were about three hundred pages of lecture 
materials and quizzes to be delivered in the on-line course. 
In order to make them easily accessible, they were organized 
into eleven sections of between twenty to fifty pages each, 
by grouping of relevant topics together. Quizzes were added 
to the end of each section to help users review the 
section's material. 
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I Author ware Attain 
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Background 



1. Introductory Concepts 
Z Number Systems 
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5 Mhimizing Logic Circuits 



Level 2 



1-0, Introduction ^ 
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1 -2, Digital And Ai^og System ^ 
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Figure 10. Organization Of Sections And Pages Of The On-Line 

Course In Authorware 

The screen layout used for the EC2820 On-Line Course as 
seen by the user is shown in Figure 11. 
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3-13 Universality ofNAND Gate 

We have seen that the Inverter and AND functions can be realized using 
only NAND gates. We can also realize the OR function using only NAND 
gates. Fig 3-18 shows the implementation. 






= A-l>o- 







= A 
B 
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Fig 3-18 NAND gates can be used to implement Inverter, OR and AND functions 
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Current Section : 3. Boolean Algebra 
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Figure 11. Final Layout Design Used For The EC2820 On-Line 

Course 



Similar to the design of the homepage, a set of 
guidelines were defined and used in the design of the layout 
as described below: 

• Look-and-Feel . To achieve a "clean" look, much space 
was placed between blocks of information. To achieve 
this, several layouts, fonts style, color 
combinations and background picture were tried. 

• Ease of navigation. The navigation buttons were made 
user-friendly and were always located in the same 
position at the bottom of each page. All buttons 
were made to respond by changing their look or color 
when they were clicked or moved over. 
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• Access to all other pages. Using the navigation 
buttons, a user was given the flexibility to move to 
the first page, last page, from page to page, first 
section, last section, section to section, search 
for keyword (s), search for a page, and go back to 
recently visited pages. The user could also choose 
to navigate using a pull-down menu. 

• Maximum screen size. At the point when the on-line 
course was designed, the biggest display that could 
fit all computer screens is the 640 pixels by 480 
pixels resolution (known as VGA mode) . 

• High level of interactivity. The interactions 
introduced in the on-line course took the form of 
user-controlled animations, simple true-false 
questions, multiple choices questions, fill in the 
blank exercises, numeric data entry for mathematical 
problems, and Drag-drop exercises. 



A user-controlled animation is shown in Figure 12 . 
Animations were used to demonstrate the step-by-step method 
of deriving the reflected Gray code from the given binary 
code. The user is allowed to view the animations at his/her 
own pace, and repeat the entire process any niomber of times. 
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2-6. Grav Code (2) | 


1 Decimal 


Binary Code 


Gray Code 


Reflection axis for 
rightmost bit of 


0 


0000 


0000 ] 


1 


0001 


0001 


the fiisttwo Gray 
codes 

The Gray code shown here is a 
special type, called the ’'reflected 
Gray code. This is so because the 
code can be derived by using the 
reflection of certain bits of the 
code as illustrated by the table on 
the left 
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0010 


0011 1 


3 


0011 
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0100 
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0110 
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0111 
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1000 




9 


1W1 




10 


1010 




11 


1011 




12 


1100 




13 


1101 




14 


1110 




15 


1111 




Continue 





li 

I 




, 19of3# 



Figure 12 . A User-Controlled Animation 



A true-false question, a multiple-choice question, and 
a f ill-in-the-blank question are shown in Figure 13, Figure 
14 and Figure 15 respectively. The user could participate by 
selecting an answer for the true-false and multiple-choice 
question or key in an answer in the case of the fill-in-the- 
blank question, and then check the correct answer by 
clicking the "Check Answer" button. If uncertain, he /she 
could click the "Check Answer" button directly. 
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4.12. Review Question (2) 

Question 

Totem pole outputs (In which there are two transistors; one 
connecting the output to high and one connecting the output to 
low) should not, in general, be connected together, whereas 
open collector (in which there is one transistor connecting the 
output to low) are Intended to be connected together. 



r True 

Check Answer | 

^ False 




Figure 13. A True-False Question 



2. IS Review Question (22) 

Question 

What function does the following circuit realize? 




r AND function 

Exclusive OR function 
^ OR function 
r Exclusive NOR function 



Check Answer | 
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Figure 14. A Multiple-Choice Question 
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2-lS, Review Question (6) 

Question 

What is the standard binary number equivalent to the 
hexadecimal number D3AFis? 

Type Your Answer & Press Enter ► I 



Check Answer 




Figure 15. A Fill-In-The-Blank Question 
A drag-and-drop question is shown in Figure 16. The 
user could participate by dragging possible answers, and 
dropping them into the appropriate blanks, in this case, and 
then check the correct answer by clicking the "Check Answer" 
button. Also, he/ she could check the answer directly. 



2-13. Review Question (7) 

Complete the table below by dragging and dropping a selection into 
each blank ertby, showing for each blank entry an 8-bit number that is 
the 8-bit two's complement of the number in ^e top row. 



A in decimal ^ 


-1 


13 


-256 


A in 8-bit 2's 
complement 


IHBH 


bhh 




-A in 8-bit 2*s 
complement 









Selections for Drag & Drop 

10001101 10000000 00000001 0111 1111 10000001 
1111 0011 1111 1111 00001101 ‘Outofrange ‘Outofrange 



Check Answer ] 




Figure 16. A Drag-And-Drop Question 
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D. DEVELOPMENT AND TESTING 

The development and testing phase was the most task- 
intensive of all the phases. First, the EC2820 Homepage was 
constructed, uploaded to the Web server, and tested. Once 
the homepage was successfully completed, the EC2820 On-Line 
Course was developed to run from the homepage. 

1. Development And Testing Of The EC2820 Homepage 

The development of the EC2820 Homepage was done without 
much difficulty using the Microsoft Frontpage 2000. 
Frontpage's complete suite of built-in functions such as 
text editor, graphics editor, website manager, navigation 
tools, ftp application etc. allowed very rapid development 
and testing. 

2. Development And Testing Of The EC2820 On-Line 
Course 

As for the development of the EC2820 On-Line course, 
due to its huge size, a popular approach used to design and 
develop huge software projects known as the incremental 
development approach was used. 

Using the approach, the on-line course project was 
developed on small incremental steps. It was started with a 
bare-bone piece and gradually built up by adding more and 
more content. At each step, additional material was 
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designed, added and tested before moving on to the next 
step. 

Using this approach, the storyboard of each section, 
which consisted of between twenty to fifty pages, was first 
drafted. It was then translated into a digital format, which 
was made up of text, graphics and animations, suitable for 
presentation in Authorware. This step was performed with the 
help of Microsoft Powerpoint and Paint Shop Pro for graphics 
creation and editing, and Microsoft Word for text editing. 
Animations and interactions were performed within 
Authorware . 

As more pages were built, 2 types of tests were 
conducted. The first was called a page test and was 
conducted very frequently. This was conducted within the 
Authorware development environment each time a group of two 
to five pages was completed in Authorware. The page test was 
carried out to check for layout, bugs, alignment problem, 
animation synchronization problem, overlapping of 
text/graphics , page-to-page navigation and other errors 
specific to the pages. Remedy actions, if required, were 
taken and the tests were repeated. 

The second was called a section test. This test was 
conducted upon the completion of a section. It required the 
entire project to be first compiled into a format suitable 
for publishing on the Web. The test was then carried on the 
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Web-published version of the project to check for 
problems /errors with uploading /downloading of the project to 
and from the web server, compatibility problems with the web 
browser, navigation when browsing from section to section, 
page to page using the navigation buttons as well as the 
menu, keyword (s) and page search, list of recently pages and 
so forth. Concurrently, the page test was also performed. 
Again, remedy actions were taken when required and the test 
was repeated. The steps used in incremental development 
approach are summarized in Figure 17 below. 
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Figure 17 . Steps in the incremental development approach 

Although the incremental development approach was very- 
tedious, it allowed the author to focus attention on a small 
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group of tasks at a time at each step, and this reduced the 
chance of introducing errors into the project, and also 
helped to detect errors early and confine the extent of 
error propagation. 

Table 5 below gives a breakdown of timings that the 
author took for coding each type of multimedia component. 



S/N 


Description 


Time Taken 


1. 


Drawing of a graphic 


15 min to 3 
hours 


2. 


Drawing of a table 


10 min to 1 
hour 


3 . 


Typing of text per page 


10 min to 30 
min 


4. 


Coding of an animation 


1 hour to 3 
hours 



Table 5 . Breakdown Of Timings For Coding 



The graphics drawn could be categorized into 3 types; 
simple, detailed and complex as shown in figure 18 to 20. On 
the average a simple graphic would take 15 minutes to 1 hour 
to produce, a detailed graphic 1 to 1.5 hours, and a complex 
graphic 2 to 3 hours. 
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Figure 18 . Simple Graphic - 15 Min To 1 Hour To Produce 
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Figure 19. A Detailed Graphic - 1 To 1.5 Hours To Produce 
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Figure 20. A Complex Graphic - 2 To 3 Hours To Produce 

A total of about two hundred graphics was created for 
the on-line course; 25 percent were simple graphics, 60 
percent were detailed ones, and the remaining 15 percent 
were complex ones. It is apparent that much time and effort 
has to be invested in the creation of graphics for on-line 
course development. Having a graphic artist as part of the 
development team would certainly help speed up the 
development work tremendously. 



E . IMPLEMENTATION 

In the implementation phase, the EC2820 Homepage and 
the EC2820 On-Line Course were successfully completed and 
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tested, and were officially published in March 2000 on the 
ECE Department's Web server that was catered for distributed 
learning . 

Evaluation was conducted to gather feedback and 
suggestions while this prototype on-line course was in use. 

Besides using the completed Authorware project for the 
on-line course, it could be used as an effective tool for 
classroom teaching, and also it could be burned into a CD- 
ROM for distribution to students on a distributed learning 
program . 
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V. CONCLUSIONS AND RECOMMENDATIONS 
A. CONCLUSIONS 

This thesis project has been an extended learning 
process about the World Wide Web and its associated 
technologies. The author has gained a substantial amount of 
knowledge and technical skills from completing this thesis 
project in many areas of Web technology including Web 
publishing, Web animations, Web based learning, and Web 
administration . 

The EC2820 Homepage and On-Line Course, that were 
created, offered many facilities to the user which provided 
a flexible and interesting learning environment. Anyone in 
the world with a computer and an internet connection could 
access the information, thus increasing the target audience. 

The homepage which, when compared to many other sites, 
was very well presented and easy to use. The on-line course 
allowed significant user interaction, and thus was an 
effective learning tool. However, both products were by no 
means finished and like all Web pages, they needed to be 
continually updated to provide the user with better 
infoirmation and features. There were two features, sound and 
video, that the author felt could have been added to make 
the on-line course more effective and complete. 
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This thesis project has sought the following answers 
to the research questions posted in Chapter I. 

1. vniich Recent Web Technology Is The Most Suitable, 
And Also Cost /Time-Effective For The Production Of 
WBT ECE Courses? 

Several recent technologies were investigated and their 
pros and cons were examined. These technologies included: 

• Publishing lecture materials directly on web pages. 

• Publishing lecture materials in the form of slide 
shows that run on the web browser. 

• Developing WBT course using a high level language 
such as Java, Visual Basic etc.. 

• Developing WBT course using a proprietary software 
package . 

• Developing WBT course using commercial-off-the-shelf 
(COTS) authoring tools such as the Macromedia 
Authorware 5 . 

In consideration of its moderately short development 
time, good maintainability and upgradeability, excellent 
ability to add interactivity and animation to the WBT 
course, and also its cost effectiveness, the use of COTS 
authoring tools was found to be the most suitable technology 
for future development of ECE WBT courses. In particular, 
the use of the Microsoft Frontpage 2000 and the Macromedia 
Authorware 5 were highly recommended for use in creating 
course homepages and WBT courses respectively due to their 
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short learning curve and the many powerful features that 
came with the software. 

2 . Vlhat Is The Reconmended Approach, Design And 
Development Process That Should Be Adopted For 
Future Productions? 

The incremental development approach was used for the 
thesis project development. It was popular for developing 
huge software projects, and in fact, the author had a prior 
opportunity to use it for his projects in a Java programming 
class . 

The approach called for small incremental steps in the 
development. The project was started with a minimal 
functionality and gradually built up step-by-step. At each 
step, additional content was designed, added and tested 
before moving on to the next step. 

It is without doubt that this methodical approach had 
led to the successful completion of the thesis project. The 
breakdown of the development work into steps and detailed 
tasks required at each step had been discussed in Chapter V. 

3 . What Are The Trainings Required For Such 
Production? 

To successfully produce a effective WBT course, the 
following knowledge, skills and resources must be made 
available : 
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• Knowledge of course content. Usually the instructor 
has to get involved in advising what materials to 
include in the WBT course. It would be of great help 
to the quality of the development if the developer 
also has a good knowledge of the course content. 

• Multimedia software. Multimedia software can be used 
to produce WBT courses that are effective learning 
tools . It is imperative that the developer receives 
formal training on the required software to attain a 
high level of proficiency so that he can bring out 
the best in these software in the shortest time 
possible . 

• Teaching skills and WBT exposure. It would help a 
great deal if the developer has some previous 
traditional teaching experience as that would equip 
him with the skills of deciding the manner 
information is organized and presented for effective 
learning. As there is a great difference between 
traditional teaching and WBT, that is, the absence 
of instructor-student face-to-face interaction in 
WBT, the developer should be exposed to WBT 
environment to learn more about its constraints and 
its strong points such as the animation capability 
that can be used to illustrate difficult concepts, 
and the interaction capability that can be used to 
engage the active involvement of the student. With 
this knowledge, he can target the content to be 
presented in different ways, meeting the needs of 
different learning styles 

• Graphic design. It is inevitable that the developer 
have graphics design and editing skills. They are 
required to transform figures, tables, and photos in 
its raw form into compressed computer format or to 
produce any animation required. 



B. RECOMMENDATIONS 

1. Formalize Training 

Developers must be well trained in the required 
multimedia software tools in order to produce effective WBT 
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courses using the least time and cost. The training approach 
used by the author, in which he self-learned all the 
required software tools , was time-consuming and tedious . The 
time taken could be easily halved using formal training 

methods, hence allowing more time to be channeled into more 
productive development work. 

There are two recommended methods of providing formal 
training to the developers . One method is to send them for 
short commercial courses that are application specific. The 
other method is to incorporate the required training into 
some of the relevant courses currently conducted in NPS . 

Potentially, there are three Computer Science (CS) courses 
that could introduce multimedia software training namely 

CS3202 - Introduction To Multimedia Production (learning 
Macromedia Director is part of the course syllabus) , CS3203 
Advanced Multimedia Production (good candidate for 
Macromedia Authorware training) and CS3505 - The Internet 

And The Information Highway (good candidate for Frontpage 
2000 or Macromedia Dreamweaver training) . 

The commercial course method is more suitable if the 

number of developers to be trained is small, and also if the 

training required is immediate or when the schedule of the 

internal NPS courses could not fit in the project schedule. 

Since many NPS departments are interested in 

distributed learning and some departments have already 

initiated various projects in that area, there will be many 
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faculty members and developers who will require training in 
multimedia software tools. This being the case, the 
incorporation of the training into some of the NPS courses 
is a more cost-effective option. 

2. Introduce Instructional Management Systems (IMS) 

With Instructional Management Systems (IMS) , the 
administrator of the WBT course can efficiently plan, 
produce, administer, and deliver curricula, as well as 
track, store, and report student progress from anywhere in 
the world, for any number of students at multiple locations. 

Using IMS, students have to login using ID and 
password, which enables the IMS to automatically track their 
individual actions. An IMS database will hold names, 
locations, and other student and course information. The IMS 
can manage course administration and planning, student 
registration and enrollment, and the assignment of specific 
training courses to subsets of the student population. It 
also provides automatic tracking and statistics of student 
progress and test scores. Limited IMS is supported by the 
current version of Macromedia Authorware. For more complete 
IMS functions, the Macromedia Pathware 4, which is fully 
compatible with Authoirware, is recommended. 
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3 . Standards : Provide A Platform For Interoperability 

In line with the recommended introduction of IMS, 
standards for developers to provide the requisite level of 
interoperability have to be established when efforts in the 
area of distributed learning are still evolving, with work 
coming from different interest groups. 

Standards improve the return on investment by 
providing a framework for interoperability. Interoperability 
holds the key to the reuse and integration needed for 
tomorrow's sophisticated distributed learning. Also, by 
providing a set of standards identifying specific trackable 
information, developers can build WBT courses which can link 
to a common management system. This will allow the school to 
better manage and track instruction. 

The benefits of having a standards-based integrated 
teaching and learning system are vast, including: 

• Providing immediate feedback so that students and 
instructors can take action as needed. 

• Providing a comprehensive library of training 
materials in one repositoiry. 

• Sharing of content and resources. 

• Providing reports to allow for better measurements 
of usage and results . 

• Minimizing costs associated with the implementation 
of multiple systems. 

• Support for a wide selection of authoring tools. 
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4. Explore Video And Real-Time Interaction 

The use of video and real-time interaction is being 
facilitated by higher bandwidth, decreasing cost and 
availability of new Web technologies. 

Lectures can be recorded, digitized and broadcasted 
live over the Web at specific times, and students using a 
computer and a internet connection, can attend the lecture 
at the comfort of their home and interact real-time with the 
lecturer . 

Alternatively, lectures can be pre-recorded, digitized, 
and broadcasted at scheduled times over the Web and students 
can watch them and send questions via email to the lecturer. 

5. Use Author's Project As Template 

It was felt that this report would give any future 
student who would be interested in developing similar 
project a good understanding of what is achievable and how 
to achieve it. 

The incremental development approach used by the author 
has been a key factor in the successful completion of the 
project and is strongly recommended for future development. 

The reuse of some of the Authoirware codes for the 
EC282 0 On-Line Course such as the code for the section- to- 
section and page-to-page navigation, true-false, multiple 
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choice questions, drag-drop exercises, animations etc., 
would certainly help reduce the overall development time. 

It is hoped that the homepage and on-line course 
provide people with many hours of enjoyment and that it will 
be further improved by future students as emerging 
technologies permit. 
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APPENDIX A. USING MULTIMEDIA FOR DISTRIBUTED LEARNING 



A. WHAT IS MULTIMEDIA? 

A commonly used definition of "multimedia" is: 

Digital multimedia is the field concerned with the 
computer-controlled integration of text, graphics, 
still and moving images, animation, sounds, and 
any other medium where every type of information 
can be represented, stored, transmitted, and 
processed digitally. [Ref. 1] 

B . WHY MULTIMEDIA? 

Over the past few years, multimedia has proven itself 
to be one of the most effective tools in education. 
Multimedia uses a combination of the text, graphics, 
animation, sounds, video etc. to create a dynamic, visual 
presentation that catches the users' attention and maintains 
their interest throughout the presentation significantly 
reducing the time needed to comprehend material. 

In essence, multimedia can play a key role in improving 
the delivery of instructional content by: [Ref. 10] 



• Presenting media in visual, graphical way using 
animation, video and other forms of multimedia. 

• Using audio to expand sensory input. 

• Creating "learning by doing" exercises. 

• Offering learners the ability to control the pace 
and flow in a non- threatening, patient manner. 
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• Providing a framework for collaboration for students 
and instructors. 

• Managing the learning environment . 

• Offering instruction any place, any time. 

C. METHOD OF INSTRUCTION VS MULTIMEDIA 

The success of a WBT course as a good learning 
environment depends on the method of instruction as in the 
traditional training situation. Only through proper teaching 
methods can we captivate, motivate, and excite our users to 
be actively involved in the learning process. The choice of 
multimedia is secondary . [Ref . 2] 

Therefore, it is of paramount importance that the 
instructor, that teaches the course in traditional method, 
authors the WBT course or plays a major role in designing 
the WBT course. 

In order to be as effective as in a traditional 
training situation, the WBT course should make good use of 
multimedia to focus on demonstrating, animating and 
explaining a topic, giving the users ample opportunity to 
practice, and paying particular attention to feedback and 
response . 
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D. IMPORTANCE OF INTERACTIVITY 

Interactivity is one of the main attractions of 
using multimedia. It helps increase the users active 
participation in processing the course material. In general, 
a more active user will understand and retain knowledge more 
readily than a passive user. 

The strategies to ensure that users participate 
actively include requiring them to answer different types of 
cjuestion (true & false, multiple choice, fill in the blanks, 
and mix & match) , step through animations, navigate through 
screens, and decide the topic to learn. 

A study by J.D Fletcher for the Institute for Defense 
Analysis found that interactive applications improve 
achievement by up to 25 percent over conventional training. 
Similar studies at university level have shown proficiency 
increments of up to 40 percent while cutting instruction 
time by half. [Ref. 2] 
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